<template>
  <div class="pageContainer" :style="{paddingTop: `${getSafeTop()}px`, paddingBottom: `${computedPaddingBottom()}px`}">
	<div
		class="nav"
		:style="{
			height: `${getCapsuleBarHeight()}px`,
			lineHeight: `${getCapsuleBarHeight()}px`,
			textAlign: headerType === 'icon' ? 'left' : 'center'
		}">
		<div v-if="back" class="back-icon">
			<u-icon  name="arrow-left" color="#282828" size="20" bold @click="goBack"></u-icon>
		</div>
		<div v-if="headerType === 'string'" class="title">
			{{ title }}
		</div>
		<div v-if="headerType === 'icon'" class="title icon">
			<img class="icon-img" src="http://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/23/icon-black.png" />
		</div>
	</div>
    <div class="container" :style="computedContainerStyle()">
		<slot></slot>
	</div>
  </div>
</template>

<script setup lang="ts">
import {useSystemInfo} from '@/hooks/useSystemInfo';
import {useRouter} from '@/hooks/useRouter';

const router = useRouter();

const props = defineProps({
  headerType: {
    type: String,
    default: 'string',
  },
  title: {
	type: String,
    default: '融华荟',
  },
  back: {
	type: Boolean,
	default: false
  },
  noTab: {
	type: Boolean,
	default: false
  },
  containerStyle: {
	type: Object,
	default: () => ({})
  }
});

const {getSafeTop, getCapsuleBarHeight, getSafeBottom} = useSystemInfo();
const computedPaddingBottom = () => {
	return getSafeBottom() + (props.noTab ? 0 : uni.upx2px(120))
}

const computedContainerStyle = () => {
	return {
		height: `calc(100vh - ${computedPaddingBottom() + getSafeTop() + getCapsuleBarHeight() + uni.upx2px(16)}px)`,
		...(props.containerStyle || {}),
	}
}

const goBack = () => {
	router.back();
}

</script>

<style lang="less" scoped>
.pageContainer {
	padding-top: 48px;
    padding-bottom: 34px;
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
	position: relative;
	.nav {
		padding-left: 16px;
		padding-bottom: 8px;
		font-size: 18px;
		position: sticky;
    	top: 0;
		.back-icon {
			display: inline-block;
			position: absolute;
			left: 16px;
			top: 50%;
			transform: translateY(-50%);
		}
		.title {
			display: inline-flex;
			align-items: center;
			&.icon {
				width: 185px;
				height: 31px;
				> .icon-img {
					width: 100%;
					height: 100%;
				} 
			}
		}
	}
	.container {
		overflow-y: auto;
		position: relative;
	}
}
</style>
